<template>
  <div class="container">

    <!--start地区查询条件-->
    <el-form style="margin-bottom: 20px;">
      <el-select v-model="selectProv" size="small" style="width: 100px" placeholder="请选择省份" @change="getProv($event)">
        <el-option v-for="(item) in prov" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-if="selectProv!=''" v-model="selectCity" size="small" style="width: 100px" placeholder="请选择城市" @change="getCity($event)">
        <el-option v-for="(item) in citys" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-if="selectCity!=''" v-model="selectCounty" size="small" style="width: 100px" placeholder="请选择县（区）" @change="getCounty($event)">
        <el-option v-for="(item) in county" :label="item.name" :value="item.id" />
      </el-select>

      <el-button type="primary" style="margin-left: 20px;">查询</el-button>
    </el-form>
    <!--end地区查询条件-->

    <!--start查询结果-->

    <!--表格-->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('common.loading')"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >

      <el-table-column width="120px" align="center" type="index" />

      <el-table-column width="120px" align="center" label="地区名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="地区标识">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import addressData from './address.js'

import { fetchAreaList } from '@/api/system'

export default {
  name: 'Region',
  data() {
    return {

      // 全国
      addressArray: [],

      // 省级
      prov: [],
      addressId: 0,

      // 市级
      citys: [],

      // 县( 区 )级
      county: [],

      area: [],
      selectProv: '',
      selectCity: '',
      selectCounty: '',

      // 总和
      addressCon: '',

      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNumber: 1,
        pageSize: 5,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      downloadLoading: false
    }
  },
  created() {
    // 页面加载时候请求列表数据
    this.getList()

    // 页面加载的时候请求全国省级数据
    const id = null
    this.getAddressList(id)
  },
  methods: {

    getAddressList(id) {
      //
      const data = {
        parentId: id
      }
      fetchAreaList(data).then(response => {
        console.log(response)
        this.prov = response.data.areaList
        this.listLoading = false
        this.list = response.data.areaList
        this.total = response.data.areaList.length
      })
    },

    // 市选择
    getProv(id) {
      // 拿到选中的省级ID 后 , 接下去调用市级接口 获取相应的市级数据 并且 渲染
      // 根据选择出来的ID , 查找下一级 地区
      const data = {
        parentId: id
      }
      this.citys = []
      this.selectProv = ''
      this.electCity = ''
      this.selectProv = id
      fetchAreaList(data).then(response => {
        console.log(response)
        this.citys = response.data.areaList
        this.listLoading = false
        this.list = response.data.areaList

        this.selectCity = ''
        this.selectCounty = ''
      })
    },
    getCity(id) {
      // 拿到选中的市级ID 后 , 接下去调用县( 区 )级接口 获取相应的市级数据 并且 渲染
      const data = {
        parentId: id
      }
      this.county = []
      this.electCity = ''
      this.selectCity = id
      fetchAreaList(data).then(response => {
        // console.log(response);
        this.county = response.data.areaList
        this.listLoading = false
        this.list = response.data.areaList

        this.selectCounty = ''
      })
    },
    getCounty(id) {
      this.selectCounty = id
    },

    // 分页
    getList() {},
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNumber = val
      this.getList()
    }
  }

}
</script>

<style scoped>
  .container{
    padding: 10px;
  }
</style>
